<template>
    <div>
        <a-button class="add_btn" @click="showModal">添加类目</a-button>
        <a-table :data-source="dataSource" :columns="columns" :pagination="pagination">
            <template #bodyCell="{ text, column,record }">
                <template v-if="column.dataIndex === 'detail'">
                    <unordered-list-outlined @click="toDetailPage(record.id)"/>
                </template>
            </template>
        </a-table>
        <a-modal @ok="addCategory" @cancel="hideModal" title="添加" :visible="modalVisible">
            <a-form
                    @finish="addCategory"
                    :model="categoryInfo"
                    autocomplete="off"
                    name="basic">
                <a-form-item name="name"
                             label="商品类目名称"
                             :rules="[{ required: true, message: '请输入商品类目名称' }]"
                             has-feedback>
                    <a-input size="large" v-model:value="categoryInfo.name"/>
                </a-form-item>

            </a-form>
        </a-modal>
    </div>
</template>

<script>
    import api from "@/constants/api";
    import {request} from "@/utils/request";
    import {message} from "ant-design-vue";

    export default {
        name: "DishCategoriesPage",
        data() {
            return {
                columns: [
                    {
                        title: "商品类目编号",
                        dataIndex: "id",
                        key: "id",
                    },
                    {
                        title: "商品类目名称",
                        dataIndex: "name",
                        key: "name",
                    },
                    {
                        title: "商品类目创建时间",
                        dataIndex: "createdTime",
                        key: "createdTime",
                    },
                    {
                        title: "商品类目更新时间",
                        dataIndex: "updatedTime",
                        key: "updatedTime",
                    },
                    {
                        title: "详情",
                        dataIndex: "detail",
                        key: "detail",
                    }
                ],
                dataSource: [],
                pagination: {
                    size: "small",
                    showSizeChanger: true,
                    showQuickJumper: true
                },
                modalVisible: false,
                categoryInfo: {},
            }
        },
        mounted() {
            this.getCategories();
        },
        methods: {
            getCategories() {
                request({
                    url: api.GET_PRODUCT_TYPE_LIST,
                }).then(res => {
                    this.dataSource = res;
                })
            },
            toDetailPage(id) {
                this.$router.push({name: "CategoriesDetailPage", query: {id: id}})
            },
            showModal() {
                this.modalVisible = true;
            },
            hideModal() {
                this.modalVisible = false;
            },
            addCategory() {
                let that = this;
                const data = new FormData();
                data.append("name", this.categoryInfo.name);
                request({
                    url: api.ADD_CATEGORY,
                    data: data,
                    method: "POST",
                    pureData: false,
                }).then(res => {
                    if (res.code === 200) {
                        message.success(res.message);
                        that.getCategories();
                        that.modalVisible = false;
                    } else {
                        message.error(res.message);
                    }
                })
            },
        }
    }
</script>

<style scoped>
    .add_btn {
        margin-bottom: 20px;
        float: right;
        margin-right: 20px;
    }
</style>